<template>
	<view class="registerContainer">
		<view class="marginTop">
			<view class="IDBox me-fx-row-start-c ">
				<view class="loginID">+86</view>
				<input class="phoneFont" placeholder="请输入手机号/账号" v-model="phone" />
			</view>
			<view class="IDBox IDBoxMar me-fx-row-start-c">
				<view class="yzm">验证码</view>
				<input class="registeryzm" placeholder="请输入收到的验证码" v-model="yzm" />
				<text class="forgetPass" @click="sendyzm" v-if="yzmBtn">
					获取验证码
				</text>
				<text class="forgetPass" v-else>
					{{yzmConter}}s
				</text>
			</view>
			<view class="IDBox me-fx-row-start-c IDBoxMar">
				<view class="loginPass">设置密码</view>
				<input class="password" placeholder="请设置登录密码" v-model="password" type="password" />
			</view>
		</view>
		<view class="loginBnt" @click="nextBtn">下一步</view>
		<view class="clickread">
			点击进入表示你已阅读并同意<text class="userAgreement">《用户协议》</text>
		</view>
		<view class="otherRegisterBox">
			<view class="otherRegister">
				其他註冊方式
			</view>
			<view class='me-fx-row-sb-c registerloginPicBox'>
				<image src="../../static/img/weixinIcon.png" alt="" />
				<image src="../../static/img/qq1.png" alt="" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				yzm: '',
				password: '',
				yzmConter:'',
				yzmBtn:true,
			}
		},
		methods: {
			sendyzm(){
				this.$u.get('/code/register', {mobile:this.phone}).then(res => {
					if(res){
						uni.showToast({
							title: res.message,
							duration: 1000,
							icon: 'none'
						});
						this.yzmTime()
						console.log(res,'res')
					}
				})
				.catch((res) => {
					console.log(res.message)
				})
				
			},
			yzmTime(){
				const TIME_COUNT = 60;
				    if (!this.timer) {
				      this.yzmConter = TIME_COUNT;
				      this.yzmBtn = false;
				      this.timer = setInterval(() => {
				      if (this.yzmConter > 0 && this.yzmConter <= TIME_COUNT) {
				        this.yzmConter--;
				       } else {
				        this.yzmBtn = true;
				        clearInterval(this.timer);
				        this.timer = null;
				       }
				      }, 1000)
				     }
			},
			nextBtn() {
				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号码',
						duration: 2000,
						icon: 'none'
					});
					return
				} else if (!(/^[1]([3-9])[0-9]{9}$/.test(this.phone))) {
					uni.showToast({
						title: '手机号码输入有误',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				else if(this.yzm == ''){
					uni.showToast({
						title: '请输入验证码',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				 else if (this.password == '') {
					uni.showToast({
						title: '请输入密码',
						duration: 2000,
						icon: 'none'
					});
					return 
				}else {
					this.$u.get('/user/status/'+this.phone).then(res => {
						if(res){
							this.$u.get('/code/register/check',{mobile:this.phone,code:this.yzm}).then(res => {
								if(res){
									uni.showToast({
										title: res.message,
										duration: 1000,
										icon: 'none'
									});
									let item ={
										mobile:this.phone,
										password:this.password
									}
									uni.setStorage({
									    key: 'item',
									    data: item,
									});
									setTimeout(()=>{
										uni.navigateTo({
											url: "./next"
										})
									},1500)
								}
							})
							.catch((res) => {
								console.log(res.message)
							})
							
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
				}
			},
		}
	}
</script>

<style>
	.registerContainer {
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
	}

	.marginTop {
		padding-top: 20rpx;
	}

	.IDBox {
		position: relative;
		background-color: white;
		height: 98rpx;
		line-height: 98rpx;
		
	}

	.IDBox input {
		font-size: 20rpx;
	}

	.IDBox .loginID,
	.IDBox .loginPass,
	.IDBox .yzm {
		width: 30%;
		text-align: center;
		font-size: 28rpx;
		font-weight:bold;
		color:rgba(51,51,51,1);
	}
.phoneFont{
	font-size: 28rpx;
}
	.IDBoxMar {
		margin-top: 4rpx;
	}

	.loginBnt {
		margin: 148rpx auto 46rpx;
		background-color: #007AFF;
		text-align: center;
		color: white;
		width:681rpx;
		height:88rpx;
		line-height: 88rpx;
		background:rgba(92,20,255,1);
		opacity:0.9;
		border-radius:44rpx;
	}

	.otherRegisterBox {
		width: 100%;
		position: fixed;
		bottom: 10%;

	}

	.otherRegister {
		width: 100%;
		text-align: center;
	}

	.otherRegister::before {
		content: '';
		position: absolute;
		top: 7%;
		left: 1%;
		width: 110px;
		height: 0.5px;
		background-color: white
	}

	.otherRegister::after {
		content: '';
		position: absolute;
		top: 6%;
		right: 1%;
		width: 110px;
		height: 0.5px;
		background-color: white;
	}

	.registerloginPicBox {
		width: 200rpx;
		height: 80rpx;
		margin: 40rpx auto;
	}

	.registerloginPicBox image {
		width: 80rpx;
		height: 80rpx;
	}

	.forgetPass {
		position: absolute;
		right: 10rpx;
		width:154rpx;
		height:46rpx;
		background:rgba(255,255,255,1);
		border:1rpx solid rgba(92,20,255,1);
		border-radius:23rpx;
		line-height: 46rpx;
		text-align: center;
		color: #6B2AFE;
	}

	.clickread {
		text-align: center;
		font-size: 22rpx;
	}

	.userAgreement {
		color: #007AFF;
	}
</style>
